<template>
  <div>
    <div class="s">
      <el-button size="mini" class="listBTN newButtonColor" @click="addWins()">新增图片</el-button>
      <el-button size="mini" class="listBTN newButtonColor" @click="modifyOpen">修改图片</el-button>
      <el-button size="mini" class="listBTN BatchDeleteColor" @click="deletePicBatch">批量删除</el-button>
    </div>
    <!-- 二级 -->
         <!-- 新增图片 -->
    <div v-if="sign">
      <el-dialog title="新增图片" :modal-append-to-body='false' :visible.sync="addWin" width="800px" class="yw" @close="imgClose">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules" size="small" class="qw">
          <el-form-item label="图片名称" prop="name">
            <el-input v-model.trim="form.name" class="kz"/>
          </el-form-item>

          <el-form-item label="类型" prop="fileType">
            <el-select v-model="form.fileType" placeholder="请选择类型" class="kz">
              <el-option v-for="item in picTypes"
                         :key="item.value"
                         :label="item.name"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="图片上传">
            <div class="tpsc">
              <el-upload id="upFile" class="upload-demo"
                         :data="fileData"
                         ref="upload"
                         :action="uploadUrl"
                         :before-upload="beforeUpload"
                         list-type="picture-card"
                         :show-file-list="true"
                         :multiple="false"
                         :on-success="handleImageSuccess"
                         :headers="headers"
                         :auto-upload="false"
                         :limit="1"
                         accept=".png,.jpg,.gif,.svg"
                         :on-progress="uploadVideoProcess">
                <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，不超过2MB且一次只能上传一张图片</div>
                <i class="el-icon-plus"/>
              </el-upload>
            </div>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button size="small" type="primary" @click="confirmSave('form')" class="editorBTN btnSpace bouncedHold">确定</el-button>
          <el-button size="small" @click="cancleForm" class="editorBTN cancelBTN">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 修改图片 -->
    <div>
      <el-dialog title="修改图片" :modal-append-to-body='false' :visible.sync="modifyWin" width="800px" class="yw">
        <el-form ref="modifyForm" :model="modifyForm" label-width="80px" size="small" class="qw">
          <el-form-item label="图片名称" :rules="[{ required: true, message: '图片名称不能为空'},]">
            <el-input v-model.trim="modifyForm.filename" class="kz"/>
          </el-form-item>

          <el-form-item label="类型">
            <el-select v-model="modifyForm.fileType" placeholder="请选择类型" class="kz">
              <el-option v-for="item in picTypes"
                         :key="item.value"
                         :label="item.name"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="图片上传">
            <div class="tpsc">
              <el-upload class="upload-demo"
                         :data="fileData"
                         ref="uploadModify"
                         :action="modifyUrl"
                         :before-upload="beforeUpload"
                         list-type="picture-card"
                         :show-file-list="true"
                         :on-success="handleImageSuccess"
                         :headers="headers"
                         :auto-upload="false"
                         :on-progress="uploadVideoProcess"
                         :file-list="fileList"
                         :limit="1"
                         :on-remove="removeFile"
                         accept=".png,.jpg,.gif,.svg">
                <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2MB</div>
                <i class="el-icon-plus"/>
              </el-upload>
            </div>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button size="small" type="primary" @click="confirmModify('modifyForm')" class="editorBTN btnSpace bouncedHold">确定</el-button>
          <el-button size="small" @click="cancleForm" class="editorBTN cancelBTN">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import {modifyPic, deleBatch} from "../../../../api/system/picture"; //查询列表和删除选项
  import {DICTDATA, getDict} from "../../../../api/dict";
  import Vue from 'vue'
  import {
    uploadUrl,
    modifyUrl,
    getPicUrl,
    handleImageSuccess
  } from "../../../../components/upload/picUpload";
  import {piliangDelete} from "../../../../api/system/production";

  const tonken = Vue.cookie.get('token');
  export default {
    data() {
    	let spacel_ = (rule, value, callback) => {
				var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
    		var	regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
	      if (regEn.test(value) || regCn.test(value)) {
	        return callback(new Error('不能包含特殊字符'))
	      } else {
	        callback()
	      }
			};
      return {
        uploadUrl: "",
        modifyUrl: "",
        form: {
          name: "",
          fileType: "",
          url: "",
          fileId: "",
          type: ""
        },
        rules: {
          name: [{required: true, message: "名称不能为空", trigger: "blur"},
          {max: 30, message: '长度不可超过30个字符', trigger: 'blur' },
          {validator: spacel_,trigger: 'blur'},
          ],
          fileType: [{required: true, message: "类型不能为空", trigger: "blur"}],
        },
        sign:1,
        modifyForm: {
        	id:"",
          filename: "",
          fileType: "",
          fileid: "",
          type: 1,
          url: "",
          updateImg:"",
        },
        fileData: {
          fileType: "",
          filename: "",
          type: 1,
          fileid: ""
        },
        fileList: [],
        fileListAdd: [],
        fileidArray: [],
        picTypes: [],
        headers: {Authorization: "Bearer " + tonken},
        saveData: false,
        modifyWin: false,
        deleteWin: false,
        addWin: false,
        updateLoading: false,
      };
    },
    created() {
      getPicUrl();
      this.uploadUrl = uploadUrl
      this.modifyUrl = modifyUrl;
      this.getPicTypes();
    },

    mounted() {
      window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    },
    methods: {
    	addWins(){
    		let that = this;
    		this.sign = 1;
    		setTimeout(function(){
    			that.addWin = true
    		},200)
    	},
    	imgClose(){
    		this.sign = 0;
    	},
      beforeunloadHandler() {
        this.$parent.$refs.biaoge.checkData.length = 0;
      },
      getPicTypes() {
        getDict(DICTDATA.PICTURE_TYPE).then(res => {
          for (let i = 0; i < res.length; i++) {
            this.picTypes.push(res[i]);
          }
        })
      },
      uploadVideoProcess(event, file, fileList) {
        //弹出上传加载
        this.updateLoading = true;
      },

      // 上传成功操作
      handleImageSuccess(res, file, fileList) {
        handleImageSuccess(res, file, fileList)
        const item = {}
        item.size = 20
        item.current = 1
        this.$parent.$refs.biaoge.queryData(item);
        this.$message.success("上传成功")
      },

      // 图片格式、大小校验
      beforeUpload(file) {
      	
        let picStyle = /^image\/(jpeg|png|jpg)$/.test(file.type);
	      const isLt2M = file.size / 1024 / 1024 < 2;
	      if (!picStyle) {
	        this.$message.error("上传头像图片只能是 JPG/PNG/GIF 格式!");
	        return false;
	      }
	      if (!isLt2M) {
	        this.$message.error("上传头像图片大小不能超过 2MB!");
	        return false;
	      }
	      this.fileData.filename = file.name;
	      if (this.fileData.filename.length > 30) {
	        this.$message.error("文件名称太长,请做修改!");
	        return false;
	      }
	      return picStyle && isLt2M;
      },
      // 图片上传
      confirmSave(formName) {
        this.fileData.fileType = this.form.fileType;
        this.fileData.filename = this.form.name;
        this.$refs[formName].validate((valid => {
          if (valid) {
            this.$refs.upload.submit();
//          this.$parent.$refs.biaoge.queryData(this.$parent.$refs.biaoge.pageData);
            this.form = {};
            this.addWin = false;
          }
        }))

      },
      // 修改按钮弹出框
      modifyOpen() {
        if (this.$parent.$refs.biaoge.checkData.length === 0) {
          this.$message.error("请选择一张图片数据进行修改")
          return false;
        }
        if (this.$parent.$refs.biaoge.checkData.length > 1) {
          this.$message.error("修改只能选择一张图片数据")
          return false;
        }
        this.modifyWin = true;
        this.modifyForm.id = this.$parent.$refs.biaoge.checkData[0].id;
        this.modifyForm.filename = this.$parent.$refs.biaoge.checkData[0].name;
        this.modifyForm.fileid = this.$parent.$refs.biaoge.checkData[0].fileid;
        this.modifyForm.fileType = this.$parent.$refs.biaoge.checkData[0].fileType;
        this.modifyForm.url = this.$parent.$refs.biaoge.checkData[0].url;
        this.fileList.push(this.modifyForm);
        if (this.fileList.length > 1) {
          this.fileList.length = 1
        }
      },
      // 移除文件
      removeFile() {
        this.fileList.length = 0
      },
      // 修改确定按钮
      confirmModify(formName) {
      	let that = this;
        if (this.modifyForm.filename.length === 0) {
          this.$message.error('图片名称必填!');
          return false;
        }
        if (this.modifyForm.fileType.length === 0) {
          this.$message.error('图片类型必选!');
          return false;
        }
//      this.fileData.filename = this.modifyForm.filename;
//      this.fileData.fileid = this.modifyForm.fileid;
//      this.fileData.fileType = this.modifyForm.fileType;
//      
//      // 格式化数据
        let formObject = new FormData();
        formObject.append("fileType", this.modifyForm.fileType);
        if (this.modifyForm.fileType === 1) {
          this.modifyForm.type = 1;
          formObject.append("type", this.modifyForm.type);
        }
        if (this.modifyForm.fileType === 2) {
          this.modifyForm.type = 2;
          formObject.append("type", this.modifyForm.type);
        }
        formObject.append("id", this.modifyForm.id);
        formObject.append("filename", this.modifyForm.filename);
        formObject.append("fileid", this.modifyForm.fileid);
        formObject.append("url", this.modifyForm.url)
        formObject.append("updateImg", 0)
        
        
        
        
        if (this.fileList.length === 0) {
        	this.fileData = this.modifyForm;
        	this.fileData.updateImg = 1;
        	setTimeout(function(){
        		that.$refs.uploadModify.submit();
	          that.fileList.length = 0;
	          that.$message({
	            message: "修改成功",
	            type: "success"
	          })
	          that.modifyWin = false;
	          setTimeout(function(){
	          	that.$parent.$refs.biaoge.queryData(that.$parent.$refs.biaoge.pageData);
	          },400)
        	},200)
          
        } else {
          this.$refs[formName].validate(valid => {
            if (valid) {
              modifyPic(formObject).then(res => {
              	if(res.code == "000000"){
	                this.$message({
	                  message: "修改成功",
	                  type: "success"
	                });
	                this.$parent.$refs.biaoge.queryData(this.$parent.$refs.biaoge.pageData);
	                this.fileList.length = 0;
	                this.modifyWin = false;
	              }else{
	              	this.$message.error(res.data);
	              }
              })
                .catch(err => {
                  this.$message.error("修改失败");
                  this.$parent.$refs.biaoge.queryData(this.$parent.$refs.biaoge.pageData);
                  this.fileList.length = 0;
                });
            }
          })
        }


        // 清空数组
        this.$parent.$refs.biaoge.checkData.length = 0
        setTimeout(function(){
          const item = {}
          item.size = 20
          item.current = 1
        	that.$parent.$refs.biaoge.queryData(item);
        },300)
      },
      // 取消按钮
      cancleForm() {
      	this.form = {}
        this.addWin = false;
        this.fileList = [];
        this.modifyWin = false;
        this.deleteWin = false;
        this.fileidArray.length = 0;
        this.$parent.$refs.biaoge.checkData = [];
      },
      deletePicBatch() {
        if (this.$parent.$refs.biaoge.checkData.length === 0) {
          this.$message({
            message: "请至少选择一条数据!",
            type: "warning",
          })
          return false;
        }
        // 获取选中的图的数据
        let arr = [];
        if (this.$parent.$refs.biaoge.checkData.length > 0) {
          for (let i = 0; i < this.$parent.$refs.biaoge.checkData.length; i++)
            arr.push(this.$parent.$refs.biaoge.checkData[i].fileid);
        }
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: "warning",
        confirmButtonClass: "messagebox-button",
		cancelButtonClass: "messagebox-button"
        }).then(() => {
          deleBatch(arr)
            .then(res => {
              this.$message({
                message: res.mesg,
                type: "success"
              })
              this.fileidArray.length = 0;
              this.$parent.$refs.biaoge.checkData.length = 0;
              const item = {}
              item.size = 20
              item.current = 1
              this.$parent.$refs.biaoge.queryData(item);
            })
            .catch(res => {
              this.$message({
                message: res.mesg,
                type: "error"
              })
              this.$message.error("删除失败");
              this.fileidArray.length = 0;
              this.$parent.$refs.biaoge.checkData.length = 0;
              const item = {}
              item.size = 20
              item.current = 1
              this.$parent.$refs.biaoge.queryData(item);
            })
        })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          })
      },
    }
  };
</script>

<style lang="scss" scoped>
  // @import url("//unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css");

  .el-upload__tip {
    color: red;
  }

  // 按钮
  .aniu {
    width: 120px;
  }

  .anniu {
    width: 120px;
  }

  .s {
   padding: 15px 25px 0;
  }

  // 二级
  .qw {
    width: 1000px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 25px;
  }


  .bz {
    width: 175px;
  }

  .dw {
    margin-right: 125px;
    display: flex;
  }

  .dw span {
    margin-top: 8px;
    margin-left: 5px;
  }

  .dw1 {
    padding-right: 4px;
  }
  .kz {
    width: 200px;
    margin-right: 120px;
  }

  .dq {
    width: 90px;
  }

  .ww {
    margin-right: 42px;
  }

  .tup {
    width: 105px;
    height: 102px;
  }

  .ya {
    width: 674px;
    height: 70px;
    margin-left: 32px;
  }

  .xzcs2 {
    width: 600px;
  }

  // 图片
  .tp {
    width: 800px;
    // display: flex;
  }

  .ws {
    width: 70px;
    height: 70px;
  }

  .tpsc {
    display: flex;
  }

  .ani {
    margin-top: 40px;
    margin-right: 10px;
    font-size: 12px;
  }

  .tpscwz {
    margin-top: 40px;
    color: red;
    font-size: 12px;
  }
     //  .el-button--primary{
//    height: 32px !important;
//    width: 120px;
//  }

</style>
